import React, { Component } from 'react';

const UserContext = React.createContext({ nickname:"默认",context: -1 })
// 函数组件 用 UserContext.Consumer 获取共享数据
function ProfileHeader(props) {
  return (
    <UserContext.Consumer>
      {
        value => {
          return (
            <div>
              <h2>用户昵称: {value.nickname}</h2>
              <h2>用户等级: {value.level}</h2>
            </div>
          )
        }
      }
    </UserContext.Consumer>
  )
}
function Profile(props) {
  return (
    <div>
      <ProfileHeader />
      <ul>
        <li>设置1</li>
        <li>设置2</li>
        <li>设置3</li>
        <li>设置4</li>
        <li>设置5</li>
      </ul>
    </div>
  )
}

class App extends Component {
  render() {
    return (
      <div>
        <UserContext.Provider value={{ nickname:"why", level: 99 }}>
          <Profile />
        </UserContext.Provider>
      </div>
    );
  }
}

export default App;